<template>
    <div class="app-container">
      <el-form
        :model="queryParams"
        ref="queryRef"
        :inline="true"
        label-width="auto"
        v-show="showSearch"
      >
        <el-row>
          <el-form-item label="生产单编号" prop="produceNo">
            <el-input
              v-model.trim="queryParams.produceNo"
              style="width: 180px"
              placeholder="请输入生产单编号"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="机台" prop="machineName">
            <el-input
              v-model.trim="queryParams.machineName"
              style="width: 180px"
              placeholder="请输入机台"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="机台编码" prop="machineNo">
            <el-input
              v-model.trim="queryParams.machineNo"
              style="width: 180px"
              placeholder="请输入机台编码"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="车间" prop="workshopName">
            <el-select style="width: 180px" v-model="queryParams.workshopName">
              <el-option label="一车间" value="一车间"></el-option>
              <el-option label="二车间" value="二车间"></el-option>
              <el-option label="三车间" value="三车间"></el-option>
              <el-option label="四车间" value="四车间"></el-option>
              <el-option label="五车间" value="五车间"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期" style="width: 308px">
            <el-date-picker
              v-model="dateRange"
              value-format="YYYY-MM-DD"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="完成状态" prop="machineState">
            <el-select style="width: 180px" v-model="queryParams.machineState">
              <el-option label="未完工" value="1"></el-option>
              <el-option label="已完成" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
  
      <el-row :gutter="10" class="mb8">
        <!-- <el-button
            type="primary"
            :disabled="multiple"
            plain
            icon="Printer"
            @click="handlePrintList"
            >打印</el-button
          > -->
        <!-- <el-col :span="1.5">
                <el-button type="primary" plain icon="Download" @click="handleExport">导出</el-button>
            </el-col> -->
      </el-row>
      <div>
        <!-- :summary-method="getSummaries"
                  show-summary -->
        <el-table   height="65vh" @selection-change="handleSelectionChange" v-loading="loading" border :data="dataList">
          <!-- <el-table-column type="selection" align="center" width="40" /> -->
          <el-table-column label="序号" width="60" type="index" align="center" />
          <el-table-column
            label="状态"
            min-width="100"
            align="center"
            :show-overflow-tooltip="true"
            prop="status"
            v-if="columns[0].visible"
          >
            <template v-slot="{ row }">
              <el-tag :type="row.status == 1 ? 'danger' : ''" effect="dark">
                {{ row.status == 1 ? "停用" : "启用" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="生产单编号"
            min-width="160"
            align="center"
            prop="produceNo"
            v-if="columns[3].visible"
          ></el-table-column>
          <el-table-column
            label="机台"
            min-width="160"
            align="center"
            prop="machineName"
            v-if="columns[3].visible"
          ></el-table-column>
          <el-table-column
            label="机台编码"
            min-width="160"
            align="center"
            prop="machineNo"
            v-if="columns[3].visible"
          ></el-table-column>
          <el-table-column
            label="已分配任务量"
            v-if="columns[5].visible"
            width="120"
            align="center"
            prop="printAmount"
          ></el-table-column>
          <el-table-column
            label="已完成任务量"
            v-if="columns[6].visible"
            width="120"
            align="center"
            prop="total"
          ></el-table-column>
          <el-table-column
            label="未完成量"
            v-if="columns[7].visible"
            width="120"
            align="center"
            prop="wtotal"
          ></el-table-column>
          <el-table-column
               label="品种"
                  v-if="columns[7].visible"
                  width="120"
                  align="center"
                  prop="breed"
          ></el-table-column>
          <el-table-column
            label="类型"
            min-width="150"
            align="center"
            prop="type"
            v-if="columns[1].visible"
          >
            <template #default="scope">
              <dict-tag
                :options="ems_machine_info_type"
                :value="scope.row.type"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="车间"
            width="150"
            align="center"
            prop="workshopName"
            v-if="columns[4].visible"
          ></el-table-column>
          <!-- <el-table-column
            label="贴标"
            width="120"
            v-if="columns[11].visible"
            prop="pieceview"
            align="center"
          ></el-table-column> -->
          <!-- <el-table-column
            label="生产单编码"
            v-if="columns[8].visible"
            align="center"
            width="120"
            prop="produceNo"
          ></el-table-column> -->
          <el-table-column
            label="生产单状态"
            v-if="columns[9].visible"
            prop="produceStatus"
            min-width="160"
            align="center"
          >
            <template #default="scope">
              <dict-tag
                :options="ems_order_status"
                :value="scope.row.produceStatus"
              />
            </template>
          </el-table-column>
          <!-- <el-table-column
            label="印刷序列号"
            min-width="160"
            v-if="columns[10].visible"
            prop="producePieceNo"
            align="center"
          ></el-table-column> -->
          <el-table-column
            label="预计交货日期"
            width="120"
            v-if="columns[12].visible"
            prop="expectTime"
            align="center"
          ></el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
      <!-- <printView
        :visible="printOpen"
        :printList="printList"
        @cancel="
          () => {
            printOpen = false;
            printList = [];
          }
        "
      ></printView> -->
    </div>
  </template>
  
  <script setup>
  import { bindingMachineTask } from "@/api/production/cover.js";
//   import printView from './printView.vue'
  const { proxy } = getCurrentInstance();
  const loading = ref(true);
  const dataList = ref([]);
  const showSearch = ref(true);
  const router = useRouter();
  const total = ref(0);
  const advanced = ref(false);
  const sheetTotal = ref(0);
  const platemakingTotal = ref(0);
  const multiple = ref(true);
  const selectRow = ref([]);
  const printOpen = ref(false)
  const printList = ref([])
  // 列显隐信息
  const columns = ref([
    { key: 0, label: `状态`, visible: true },
    { key: 1, label: `新/旧版`, visible: true },
    { key: 2, label: `制版日期`, visible: true },
    { key: 3, label: `制版编码`, visible: true },
    { key: 4, label: `生产单编码`, visible: true },
    { key: 5, label: `出版编码`, visible: true },
    { key: 6, label: `书刊编码`, visible: true },
    { key: 7, label: `书刊名称`, visible: true },
    { key: 8, label: `印刷序列号`, visible: true },
    { key: 9, label: `品种`, visible: true },
    { key: 10, label: `组成`, visible: true },
    { key: 11, label: `印张`, visible: true },
    { key: 12, label: `印数`, visible: true },
    { key: 13, label: `印色`, visible: true },
    { key: 14, label: `版材数量`, visible: true },
    { key: 15, label: `制版数量`, visible: true },
    { key: 16, label: `版材尺寸`, visible: true },
    { key: 17, label: `制版人`, visible: true },
    { key: 18, label: `烤版人`, visible: true },
    { key: 19, label: `完成日期`, visible: true },
    { key: 20, label: `取版人`, visible: true },
    { key: 21, label: `取版日期`, visible: true },
    { key: 22, label: `备注`, visible: true },
  ]);
  
  const data = reactive({
    queryParams: {
      pageNum: 1,
      pageSize: 50,
      machineState: '1',
    },
  });
  
  const getDateNow = () => {
    var myDate = new Date();
    var year = myDate.getFullYear();
    var month = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月，所以要加1);
    var day = myDate.getDate(); //获取当前日（1-31）
    if (month < 10) {
      month = "0" + month;
    }
    if (day >= 0 && day <= 9) {
      day = "0" + day;
    }
    var firstDay = year + "-" + month + "-01";
    return firstDay;
  };
  const handleSelectionChange = (row) => {
    selectRow.value = row;
    multiple.value = !row.length;
  };
  // 多选打印
  const handlePrintList = () => {
    printOpen.value = true;
    printList.value = selectRow.value;
  };
  const getCurrentDay = () => {
    var now = new Date();
    var year = now.getFullYear();
    var month = now.getMonth() + 1; // 月份从0开始，需要加1
    var day = now.getDate();
    if (month < 10) {
      month = "0" + month;
    }
    if (day >= 0 && day <= 9) {
      day = "0" + day;
    }
    const currentDay = year + "-" + month + "-" + day;
    return currentDay;
  };
  const dateRange = ref([getDateNow(), getCurrentDay()]);
  const { queryParams } = toRefs(data);
  const { ems_machine_info_type, ems_machine_info_model, ems_order_status } =
    proxy.useDict(
      "ems_machine_info_type",
      "ems_order_status",
      "ems_machine_info_model"
    );
  
  const getList = () => {
    loading.value = true;
    bindingMachineTask({
      ...queryParams.value,
      startDate: Array.isArray(dateRange.value) ? dateRange.value[0] : undefined,
      endDate:
        Array.isArray(dateRange.value) > 0 ? dateRange.value[1] : undefined,
    })
      .then((res) => {
        loading.value = false;
        res.rows.forEach((val,index)=>{
          if(val.userName!=null){
            val.machineName=val.machineName+'/'+val.userName;
          }
          
          //未完成量=已分配任务量-已完成任务量
          val.wtotal=Number(val.printAmount || 0)-Number(val.total || 0);
        })
        dataList.value = res.rows;
        if (res.rows.length > 0) {
          sheetTotal.value = res.rows[0].sheetTotal;
          platemakingTotal.value = res.rows[0].platemakingTotal;
        }
        total.value = res.total;
      })
      .catch((err) => {
        loading.value = false;
      });
  };
  // 合计
  const getSummaries = (param) => {
    const { columns, data } = param;
    const sums = [];
    columns.forEach((column, index) => {
      if (index === 0) {
        sums[index] = "合计";
        return;
      }
      switch (column.property) {
        case "sheetAmount":
          sums[index] = sheetTotal.value;
          break;
        case "platemakingNumber":
          sums[index] = platemakingTotal.value;
          break;
        default:
          break;
      }
    });
    return sums;
  };
  // 搜索
  const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
  };
  /** 重置按钮操作 */
  const resetQuery = () => {
    dateRange.value = [getDateNow(), getCurrentDay()];
    proxy.resetForm("queryRef");
    handleQuery();
  };
  
  const handleViewCode = (row) => {
    router.push({
      path: "/production/platemaking/platemakingDetails",
      query: {
        id: row.platemakingId,
        info: true,
      },
    });
  };
  
  getList();
  // router.beforeEach((to, from, next) => {
  //     if (to.path == "/basicInfo/personnel") {
  //         getList()
  //     }
  //     next();
  // });
  </script>
  
  <style lang="scss" scoped>
  .operation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 18px;
  }
  </style>
  